<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<style>
    canvas.editor {
        border: 2px solid #444;
    }

    .msg {
        color: #abcdef
    }

    #koi {
        position: relative;
        float: left;
    }

    #koi #monitor {
        float: left;
        margin: 20px;
    }

    #monitor .small-input {
        width: 40px;
    }

    #monitor .editor {
        padding: 5px;
        border: solid 2px #444;
    }

    #monitor .properties {
        padding: 5px;
        border: solid 2px #444;
    }

    #koi #main {
        float: left;
    }

    .debug {
        float: left;
        font-size: 10px;
    }
</style>
<div ng-app="koi">

    <div id="koi" ng-controller="EditorCtrl">
        <h2>Process:<input ng-model="name"></h2>

        <div id="main">
            <p>
                <button ng-click="save()">save</button>
                <button ng-click="reset()">Reset</button>
                <button ng-click="test()">Test</button>
                <span class='msg'>{{msg}}</span>
            </p>
            <div>
                <canvas id="editor_canvas" class="editor"
                        ng-click="handleClick($event)"
                        ng-dblclick="handleDbClick($event)"
                        my-right-click="handleRightClick($event)"
                        ng-mousedown="handleDragging($event)">
                    <!-- -->
                </canvas>
            </div>
        </div>
        <div id="monitor">
            <div class="editor">
                <div>
                    <h4>Element @{{currentSelect.id}}</h4>

                    <p>
                        type:<select ng-model="currentSelect.type" ng-change="changeType()">
                        <option value="a">Activity</option>
                        <option value="s">Synchronizer</option>
                    </select>
                    </p>

                    <p> x: <input ng-model="currentSelect.x"></p>

                    <p> y: <input ng-model="currentSelect.y"></p>

                    <div id="editor_a">
                        <p> name: <input ng-model="currentSelect.name"></p>

                        <p> url: <textarea ng-model="currentSelect.act_url"></textarea></p>

                        <p> method: <input ng-model="currentSelect.act_method"></p>


                        <p> params:</p>
                        <form><input class="small-input" ng-model="param.key">:<input class="small-input"
                                                                                     ng-model="param.val">
                            <input type="submit" ng-click="param()" value="+"></form>
                        </p>
                        <p ng-repeat="(k,v) in currentSelect.act_params">{{k}}:{{v}}</p>
                    </div>

                    <div id="editor_s">
                        syn_strategy:
                        <select ng-model="currentSelect.syn_strategy">
                            <option value="all">all</option>
                            <option value="any">any</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="properties">
                <h4>Properties</h4>

                <p>

                <form><input class="small-input" ng-model="prop.key">:<input class="small-input" ng-model="prop.val">
                    <input type="submit" ng-click="prop()" value="+"></form>
                </p>
                <p ng-repeat="(k,v) in editor.props">{{k}}:{{v}}</p>
            </div>
        </div>
        <div class="debug">
            <p>Points</p>

            <p ng-repeat="(k,v) in editor.points">{{k}}:{{v}}</p>

            <p>Trans</p>

            <p ng-repeat="(k,v) in editor.trans">{{k}}:{{v}}</p>
        </div>
    </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.json.js"></script>
<script src="/js/koi_editor.js"></script>
<script src="/js/angular.js"></script>
<script>

    $(function () {

        var $editor = $('#editor_canvas');
        $editor.attr({
            width: '800',
            height: '600'
        });

    });

    var app = angular.module("koi", []);

    app.directive('myRightClick', function ($parse) {
        return {
            scope: false,
            restrict: 'A',
            link: function (scope, element, attrs) {
                var fn = $parse(attrs.myRightClick);
                element.bind('contextmenu', function (event) {
                    scope.$apply(function () {
                        event.preventDefault();
                        fn(scope, {$event: event});
                    });
                });
            }
        }
    });

    function EditorCtrl($scope) {
        var $editor = $('#editor_canvas');
        var editor = $scope.editor = new ProcessFlowEditor($editor);

//        var obj = $scope.obj = get();
//
//        $scope.obj_prop = obj.prop = {key: "a", value :"v"};

        function onSingleSelect(p) {
            $.each($scope.editor.points, function (i, elem) {
                elem.fillStyle = '#444';
                elem.strokeStyle = '#444';
            });

            p.strokeStyle = 'red';
            p.fillStyle = 'red';
        }

        function onMultiSelect(p) {
            p.strokeStyle = 'red';
            p.fillStyle = 'red';
        }

        $scope.currentSelect;

        $scope.prop = {};
        $scope.param = {};
        $scope.msg = 'all ok...';

        $scope.selectPoint = function (e) {
            var p = editor.mousePoint(e);
            var ret;
            if (ret = $scope.editor.findPoint(p)) {
                $scope.currentSelect = ret;
                //change color
                onSingleSelect(ret);
                //show data
                $scope.msg = 'Found point' + ret;
            } else {
                $scope.msg = 'Nothing found';
            }
            return ret;
        };

        $scope.createPoint = function (e) {
//            if('add' == $scope.clickMode)
            var p = editor.mousePoint(e);
            $scope.currentSelect = p;
            if (!$scope.editor.collidingDetect(p)) {
                editor.addPoint(p);
                $scope.msg = 'Add point';
            }
            else {
                $scope.msg = 'Warning!!!collided';
            }
        };

        $scope.changeType = function () {
            console.log($scope.currentSelect);
            if($scope.currentSelect === undefined) {
                return;
            }
            if ('s' == $scope.currentSelect.type) {
                $scope.currentSelect.toSynchronizer();
            }
            if ('a' == $scope.currentSelect.type) {
                $scope.currentSelect.toActivity();
            }
            $scope.editor.clear().render();
        };

        $scope.error = function (msg) {
            $scope.msg = msg;
            return false;
        };

        /**choose **/
        $scope.handleClick = function (e) {
            var old = $scope.currentSelect;
            $scope.currentSelect = $scope.selectPoint(e);
            if (e.shiftKey) {
                if ($scope.currentSelect !== old && $scope.currentSelect !== undefined) {
                    $scope.editor.addTran(old, $scope.currentSelect, prompt("condition", "true"));
                }
            }
            $scope.editor.clear().render();
            return false;
        };

        $scope.handleDbClick = function (e) {
            $scope.createPoint(e);
            $scope.editor.clear().render();
        };

        $scope.handleRightClick = function (e) {
            var old = $scope.currentSelect;
            var cursor = editor.mousePoint(e);
            var p;
            if (p = editor.findPoint(cursor)) {
                $scope.error("found:" + p);
                $scope.currentSelect = p;
            }
            if (e.shiftKey && $scope.currentSelect !== old) {
                $scope.editor.deleteTran(old, $scope.currentSelect);
            } else {
                editor.deletePoint(p);
                $scope.error("found:" + p + "deleted");
            }
            $scope.editor.clear().render();
            return false;
        };

        function onDragStart(e) {
            var p = $scope.editor.findPoint(editor.mousePoint(e));
            if (p === undefined) {
                $scope.error("point not found .Drag failed.");
                return;
            }
            e.data = p;
            $editor.bind("mouseup", e.data, onDragEnd);
            $editor.bind("mousemove", e.data, onDragging);
        }

        function onDragEnd() {
            $editor.unbind("mousemove", onDragging);
            $editor.unbind("mouseup", onDragEnd);
        }

        function onDragging(event) {
            var p = event.data;
            var cursor = editor.mousePoint(event);
            onSingleSelect(p);
            p.moveTo(cursor);
            $scope.error('dragging');
            //draw
            $scope.editor.clear().render();
        }

        $scope.handleDragging = onDragStart;

        $scope.reset = function () {
            $scope.editor.clear(true);
        };

        $scope.deleteSelect = function () {
            $scope.editor.deletePoint($scope.currentSelect);
            $scope.editor.clear().render();
        };

        $scope.prop = function () {
            $scope.editor.prop($scope.prop.key, $scope.prop.val);
        }

        $scope.param = function () {
            $scope.currentSelect.act_params[$scope.param.key] = $scope.param.val;
        }

//        setInterval(function () {
//            //do the refresh
//            $scope.editor.render();
//        }, 200);

    }

</script>
</body>
</html>

